<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>Iron Man反应堆</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background: radial-gradient(#353c44, #222931);
		}

		.circle {
			border-radius: 50%;
		}

		.center {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.container {
			position: relative;
			width: 300px;
			height: 300px;
			border: 1px solid rgb(18, 20, 20);
			background: #384c50;
			box-shadow: 0 0 32px 8px rgb(18, 20, 20), 0 0 4px 1px rgb(18, 20, 20) inset;
		}

		.container .box1 {
			width: 238px;
			height: 238px;
			background: rgb(22, 26, 27);
			box-shadow: 0 0 4px 1px aqua;
		}

		.container .box2 {
			width: 220px;
			height: 220px;
			background: #fff;
			box-shadow: 0 0 5px 1px aqua, 0 0 5px 4px aqua inset;
		}

		.container .box3 {
			width: 180px;
			height: 180px;
			background: #073c4b;
			box-shadow: 0 0 5px 4px aqua, 0 6px 2px aqua inset;
		}

		.container .box4 {
			width: 120px;
			height: 120px;
			border: 1px solid aqua;
			background: #fff;
			box-shadow: 0 0 2px 1px aqua, 0 0 10px 5px aqua inset;
		}

		.container .box5 {
			width: 70px;
			height: 70px;
			border: 5px solid #1b4e5f;
			box-shadow: 0 0 7px 5px aqua, 0 0 10px 10px aqua inset;
		}

		.container .box6 {
			position: relative;
			width: 100%;
			height: 100%;
			animation: rotate 3s linear infinite;
		}

		.container .box6 .coil {
			position: absolute;
			width: 30px;
			height: 20px;
			top: calc(50% - 110px);
			left: calc(50% - 15px);
			background: #073c4b;
			box-shadow: 0 0 5px aqua inset;
			transform: rotate(calc(var(--i)*45deg));
			transform-origin: center 110px;
		}

		@keyframes rotate {
			0% {
				transform: rotate(0; )
			}

			100% {
				transform: rotate(360deg);
			}
		}
	</style>
</head>

<body>
	<div class="container circle ">
		<div class="box1 circle center"></div>
		<div class="box2 circle center"></div>
		<div class="box3 circle center"></div>
		<div class="box4 circle center"></div>
		<div class="box5 circle center"></div>
		<div class="box6 circle">
			<div class="coil" style="--i:0"></div>
			<div class="coil" style="--i:1"></div>
			<div class="coil" style="--i:2"></div>
			<div class="coil" style="--i:3"></div>
			<div class="coil" style="--i:4"></div>
			<div class="coil" style="--i:5"></div>
			<div class="coil" style="--i:6"></div>
			<div class="coil" style="--i:7"></div>
		</div>
	</div>
</body>

</html>